<template>
  <div class="view-content">
    <el-table
      :data="excelData"
      :header-cell-style="headerCellStyle"
      stripe
      border
      style="width: 100%"
      max-height="640"
    >
      <template v-if="type===1">
        <template v-for="item in columnList01">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :type="item.type ? item.type:''"
            :width="item.width ? item.width:''"
            :align="item.align ? item.align:'left'"
            header-align="center"
          />
        </template>
      </template>
      <template v-else>
        <template v-for="item in columnList02">
          <el-table-column
            :prop="item.prop"
            :label="item.label"
            :type="item.type ? item.type:''"
            :width="item.width ? item.width:''"
            :align="item.align ? item.align:'left'"
            header-align="center"
          />
        </template>
      </template>
    </el-table>
  </div>
</template>

<script>

export default {
  name: 'ExcelView',
  props: [
    'excelData',
    'type'
  ],
  data() {
    return {
      columnList01: [
        { label: '序号', prop: 'sortorder', align: 'center', width: 160 },
        { label: '部门', prop: 'modularDepart' },
        { label: '品类', prop: 'modularCategory' },
        { label: '货架号', prop: 'modularSection' },
        { label: '位置', prop: 'modularLocation' }
      ],
      columnList02: [
        { label: '序号', prop: 'sortorder', align: 'center', width: 160 },
        { label: '区域', prop: 'area', align: 'center' },
        { label: '货架', prop: 'column', align: 'center' },
        { label: '层数', prop: 'grid', align: 'center' }
      ]
    }
  },
  methods: {
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#D2D2D2; font-size:14px; color:#333333;'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped>

  .view-content {
    height: 100%;
    justify-content: space-between;
    padding-top: 32px;
  }

  .content-item {
    height: 100%;
    width: 100%;
  }

  .content-item-title {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 16px;
  }

</style>
